<template>
	<view>
		<u-sticky>
			<view class="" style="padding: 0 28rpx;">
				<homeHeader></homeHeader>
				<view class="search-row">
					<view class="search-row-address">
						北京
					</view>
					<u-search placeholder="搜索标题" v-model="keyword" bgColor="#fff" :showAction="false"
						searchIconSize="38rpx" shape="round" height="76rpx" @search="searchHandler" @clear="searchHandler"></u-search>
				</view>

			</view>
			<u-tabs :list="tabList" activeStyle="font-weight:bold;color:#000000;"
				inactiveStyle="color:#9C9C9C;font-weight:nomal;" lineHeight="3px" lineWidth="20px"
				@change="tabsChange"></u-tabs>
		</u-sticky>
		<template v-for="(item,index) of data">
			<!-- 工作 -->
			<jobItemComponent :info="item" v-if="item.task_type == 'task_job' || item.task_type == 'task_medical'">
			</jobItemComponent>
			<!-- 住房 -->
			<houseItemComponent :info="item" v-if="item.task_type == 'task_house'"></houseItemComponent>
		</template>

	</view>
</template>

<script>
	import homeHeader from "@/components/home_header/index.vue"
	import jobItemComponent from "@/components/jobItemComponent/index.vue"
	import houseItemComponent from "@/components/houseItemComponent/index.vue"
	import {
		getTaskPage
	} from "@/api/task.js"
	export default {
		components: {
			homeHeader,
			jobItemComponent,
			houseItemComponent
		},
		data() {
			return {
				keyword: "",
				tabList: [{
					name: '工作',
					type: 'task_job'
				}, {
					name: '住房',
					type: 'task_house'
				}, {
					name: '医疗',
					type: 'task_medical'
				}],
				page: {
					page_size: 7,
					page_number: 1,
					total: 0
				},
				task_type: 'task_job',
				data: [],
				status: "loadmore"
			}
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			this.getData()
		},
		methods: {
			tabsChange(e) {
				this.task_type = e.type
				this.page = {
					page_size: 7,
					page_number: 1,
					total: 0
				}
				this.data = []
				this.status = 'loadmore'
				this.getData()
			},
			searchHandler(){
				this.page = {
					page_size: 7,
					page_number: 1,
					total: 0
				}
				this.data = []
				this.status = 'loadmore'
				this.getData()
			},
			getData() {
				if (this.status != "nomore") {
					this.status = "loading"
				} else {
					return
				}
				getTaskPage({
						...this.page,
						keyword: this.keyword,
						task_type: this.task_type,
					})
					.then(res => {
						const data = (res.list || []).map(item => {
							try {
								item.images = JSON.parse(item.images)
							} catch (e) {
								item.images = []
							}
							try{
								item.tag = JSON.parse(item.tag)
							}catch(e){
								item.tag = []
							}
							return item
						})
						this.page.total = res.total
						this.data.push(...data)
						if (this.data.length == res.total) {
							this.status = "nomore"
						} else {
							this.page.page_number += 1
							this.status = "loadmore"
						}
					})
					.catch(e => {
						this.status = "loadmore"
					})
			}
		}
	}
</script>
<style>
	page {
		background: #649CF6 linear-gradient(360deg, #fff 0%, #ECF3FF 60%, #F1F6FF 96%, #F1F6FF 100%);
	}
</style>
<style scoped lang="scss">
	.search-row {
		display: flex;
		align-items: center;
		margin-top: 20rpx;

		.search-row-address {
			margin-right: 16rpx;
			min-width: 100rpx;
			font-weight: 400;
			font-size: 34rpx;
			color: #000000;
			line-height: 52rpx;
		}
	}
</style>